<template>
    <div class="container main">
        <div class="row">
            <div class="placeholder" v-if="isSidebarFixed"></div>
            <div class="col-2 left" ref="Sidebar" id="left">
                <div class="tab">
                    <i class="iconfont icon-menu"></i>
                    全部课程
                </div>
                <div class="gallery-list">
                    <div class="navto-nav">
                        <i class="iconfont icon-fenxiang"></i>
                        HTML/CSS
                    </div>
                    <div class="navto-nav">
                        <i class="iconfont icon-fenxiang"></i>
                        JavaScript
                    </div>
                    <div class="navto-nav">
                        <i class="iconfont icon-fenxiang"></i>
                        Vue/React
                    </div>
                    <div class="navto-nav">
                        <i class="iconfont icon-fenxiang"></i>
                        微信小程序
                    </div>
                    <div class="navto-nav">
                        <i class="iconfont icon-fenxiang"></i>
                        数据库
                    </div>
                    <div class="navto-nav">
                        <i class="iconfont icon-fenxiang"></i>
                        HTTP
                    </div>
                    <div class="navto-nav">
                        <i class="iconfont icon-fenxiang"></i>
                        TypeScript
                    </div>
                </div>
            </div>
            <div class="col-10 right">
                <HtmlCss></HtmlCss>
                <JavaScript></JavaScript>
                <Vue></Vue>
                <WxChat></WxChat>
                <MySql></MySql>
                <Http></Http>
                <TypeScript></TypeScript>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import HtmlCss from "./HtmlCss.vue";
import JavaScript from "./JavaScript.vue";
import Vue from "./Vue.vue";
import WxChat from "./WxChat.vue";
import MySql from "./MySql.vue";
import Http from "./Http.vue";
import TypeScript from "./TypeScript.vue";
//侧边导航栏滑动固定
import { ref, onMounted, onBeforeUnmount } from "vue";
const leftHight = ref(400)
const Sidebar = ref<HTMLElement | null>(null)//定义侧边栏
const isSidebarFixed = ref(false);//站位符是否显示
//定义滑动处理函数
const handleScroll = (sidebar: number): void => {
    const scrollTop = document.documentElement.scrollTop;
    if (scrollTop > sidebar) {
        isSidebarFixed.value = true
        if (Sidebar.value) {
            Sidebar.value.style.position = 'fixed';
            Sidebar.value.style.top = '0';
        }

    } else {

        isSidebarFixed.value = false
        if (Sidebar.value) {
            Sidebar.value!.style.position = 'static';
        }
    }
}
onMounted(() => {
    const sidebar = document.getElementById('left')!.offsetTop
    window.addEventListener('scroll', () => handleScroll(sidebar));
});

onBeforeUnmount(() => {
    const sidebar = document.getElementById('left')!.offsetTop
    window.removeEventListener('scroll', () => handleScroll(sidebar));
});
</script>

<style lang='scss' scoped>
.main {
    margin: 20px auto;

    .row {
        width: 100%;
        max-width: 1260px;
        min-width: 755px;
        margin: 0 auto;
        overflow: hidden;
    }

    .left {
        background-color: #fff;
        border-color: #eee;
        min-height: 0;
        z-index: 666;
        position: static;
        overflow: hidden;

        .tab {
            padding-left: 4px;
            font-size: 1.2em;
            line-height: 2.6em;
            font-weight: bold;
            color: #64854c;
            border: 1px solid rgba(0, 0, 0, .1);
            border-bottom: 0;
            background-color: #f2f2f2;
        }

        .gallery-list {
            margin: 8px 0px;
            font-size: 14px;

            :nth-child(even) {
                background-color: #fbfbfb;
            }

            :nth-child(odd) {
                background-color: #fff;
            }

            .navto-nav {
                padding: 4px;
                font-size: 1.2em;
                height: 40px;
                line-height: 30px;
            }

            .inline {
                background-color: #f6f6f6 !important;
            }
        }

    }

    .placeholder {
        border-color: #eee;
        height: 1px;
        width: 207px;
    }

    .right {
        width: 80%;
        margin-left: 30px;
        padding: 12px 20px;
        border: 1px solid #eaeaea;
        background-color: #fff;
        border-radius: 4px;
    }

}
</style>
